<template>
    <div>
        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div style="font-weight: 700;">
                    {{ $t('text.House.l7') }}
                </div>
                <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                    $t('text.House.l14') }}</el-button>
            </div>
            <div class="flex2">

                <div class="ndsTitle">{{ $t('text.Contract.l132') }}</div>
                <div class="ndsItem">
                    <div>{{ $t('text.Contract.l138') }}</div>
                    <div class="ndsText2">
                        {{ detailData.houseType == null ? '-' : '' }}
                        {{ detailData.houseType == '0' ? $t('text.House.l187') : '' }}
                        {{ detailData.houseType == '1' ? $t('text.House.l188') : '' }}
                        {{ detailData.houseType == '2' ? $t('text.House.l189') : '' }}
                        {{ detailData.houseType == '3' ? $t('text.House.l190') : '' }}
                        {{ detailData.houseType == '4' ? $t('text.House.l191') : '' }}
                    </div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.Contract.l139') }}</div>
                    <div class="ndsText2">{{ detailData.houseArea == null ? '-' : detailData.houseArea + 'm²' }}</div>
                </div>
                <div class="ndsItem">
                    <div>{{ $t('text.Contract.l140') }}</div>
                    <div class="ndsText2">
                        {{ detailData.roomNumber > 0 ? detailData.roomNumber + $t('text.DialogLayout.l91') : '' }}
                        {{ detailData.parlorNumber > 0 ? detailData.parlorNumber + $t('text.DialogLayout.l92') : '' }}
                        {{ detailData.toiletNumber > 0 ? detailData.toiletNumber + $t('text.DialogLayout.l93') : '' }}
                        {{ detailData.balconyNumber > 0 ? detailData.balconyNumber + $t('text.DialogLayout.l94') : ''
                        }}&ensp;
                    </div>
                </div>

                <div class="ndsItem" v-if="index == '0'">
                    <div>{{ $t('text.Contract.l141') }}</div>
                    <div class="ndsText2">
                        {{ detailData.mortgageStatus == '0' ? $t('text.Contract.l315') : '' }}
                        {{ detailData.mortgageStatus == '1' ? $t('text.Contract.l316') : '' }}
                        {{ detailData.mortgageStatus == null ? '-' : '' }}
                    </div>
                </div>

                <div class="ndsItem" v-if="index == '0'">
                    <div>{{ $t('text.Contract.l142') }}</div>
                    <div class="ndsText2">????????????</div>
                </div>
                <div class="ndsItem" v-if="index == '0'">
                    <div>{{ $t('text.Contract.l143') }}</div>
                    <div class="ndsText2">{{ detailData.ownershipNo == null ? '-' : detailData.ownershipNo }}</div>
                </div>
                <div class="ndsItem" v-if="index == '0'">
                    <div>{{ $t('text.Contract.l144') }}</div>
                    <div class="ndsText2">{{ detailData.houseAddress == null ? '-' : detailData.houseAddress }}</div>
                </div>

                <div class="ndsItem" v-if="index == '1'">
                    <div>{{ $t('text.Contract.l317') }}</div>
                    <div class="ndsText2">
                        {{ detailData.startRentTime == null ? '-' : detailData.startRentTime }}&ensp;-&ensp;
                        {{ detailData.endRentTime == null ? '-' : detailData.endRentTime }}
                    </div>
                </div>
                <div class="ndsItem" v-if="index == '1'">
                    <div>{{ $t('text.Contract.l318') }}</div>
                    <div class="ndsText2">{{ detailData.payMethod == null ? '-' : detailData.payMethod }}</div>
                </div>
                <div class="ndsItem" v-if="index == '1'">
                    <div>{{ $t('text.Contract.l319') }}</div>
                    <div class="ndsText2">{{ detailData.depositPrice == null ? '-'
                        : String(detailData.depositPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "AED" }}</div>
                </div>
                <div class="ndsItem" v-if="index != '0'">
                    <div>{{ $t('text.Contract.l320') }}</div>
                    <div class="ndsText2">{{ detailData.houseAddress == null ? '-' : detailData.houseAddress }}</div>
                </div>

                <!--卖方-->
                <div class="line"></div>
                <div class="ndsTitle" style="width:100%;font-weight: 700;">{{ $t('text.Contract.l133') }}</div>

                <div style="width: 100%;display: flex;" v-for="item in detailData.userList?.filter(v => v.fromType === '1')"
                    :key="item">
                    <div class="ndsItem">
                        <div>{{ $t('text.Contract.l145') }}</div>
                        <div class="ndsText2">{{ item.name == null ? '-' : item.name }}</div>
                    </div>
                    <div class="ndsItem">
                        <div>{{ $t('text.Contract.l146') }}</div>
                        <div class="ndsText2">
                            {{ item.persona == "" ? '-' : '' }}
                            {{ item.persona == "0" ? $t('text.Contract.l292') : '' }}
                            {{ item.persona == "1" ? $t('text.Contract.l293') : '' }}
                            {{ item.persona == "2" ? $t('text.Contract.l294') : '' }}
                            {{ item.persona == "3" ? $t('text.Contract.l295') : '' }}
                        </div>
                    </div>
                    <div class="ndsItem">
                        <div>{{ $t('text.Contract.l147') }}</div>
                        <div class="ndsText2">{{ item.phone == "" ? '-' : item.phone }}</div>
                    </div>
                    <div class="ndsItem">
                        <div>{{ $t('text.Contract.l148') }}</div>
                        <div class="ndsText2">
                            {{ item.credential == "" ? '-' : item.credentialType == '0' ? $t('text.Contract.l297') + '/' +
                                item.credential : $t('text.Contract.l296') + '/' + item.credential }}
                        </div>
                    </div>
                </div>
                <!--买方-->
                <div class="line"></div>
                <div class="ndsTitle" style="width:100%;font-weight: 700;">{{ $t('text.Contract.l134') }}</div>
                <div style="width: 100%;display: flex;" v-for="item in detailData.userList?.filter(v => v.fromType === '0')"
                    :key="item">
                    <div class="ndsItem">
                        <div>{{ $t('text.Contract.l145') }}</div>
                        <div class="ndsText2">{{ item.name == null ? '-' : item.name }}</div>
                    </div>
                    <div class="ndsItem">
                        <div>{{ $t('text.Contract.l146') }}</div>
                        <div class="ndsText2">
                            {{ item.persona == "" ? '-' : '' }}
                            {{ item.persona == "0" ? $t('text.Contract.l292') : '' }}
                            {{ item.persona == "1" ? $t('text.Contract.l293') : '' }}
                            {{ item.persona == "2" ? $t('text.Contract.l294') : '' }}
                            {{ item.persona == "3" ? $t('text.Contract.l295') : '' }}
                        </div>
                    </div>
                    <div class="ndsItem">
                        <div>{{ $t('text.Contract.l147') }}</div>
                        <div class="ndsText2">{{ item.phone == "" ? '-' : item.phone }}</div>
                    </div>
                    <div class="ndsItem">
                        <div>{{ $t('text.Contract.l148') }}</div>
                        <div class="ndsText2">
                            {{ item.credential == "" ? '-' : item.credentialType == '0' ? $t('text.Contract.l297') + '/' +
                                item.credential : $t('text.Contract.l296') + '/' + item.credential }}
                        </div>
                    </div>
                </div>
                <!--备注-->
                <div class="line"></div>
                <div class="ndsTitle" style="width:100%;font-weight: 700;">{{ $t('text.Contract.l135') }}</div>
                <div class="ndsItem">
                    <div  class="ndsText2">{{ detailData.notes == null || detailData.notes == '' ? '-' : detailData.notes }}</div>
                </div>
                <!--附件-->
                <div class="line"></div>
                <div class="ndsTitle" style="width:100%;font-weight: 700;">{{ $t('text.Contract.l136') }}</div>
                <div class="ndsItem">
                    <div class="fileList ndsText2" v-for="item in detailData.annexList" :key="item">
                        <a target="_blank" :href="item.path" style=" text-decoration: none;color: inherit;">{{ item.name
                        }}</a>
                    </div>
                </div>

            </div>
        </div>


    </div>
</template>
    
<script>
export default {
    name: "CustomBasicDetail",
    props: {
        detailData: { defatlt: {} },
        index: [Number, String]
    },
    components: {},
    data() {
        return {
            page: 1,

        }
    },
    mounted() { },
    methods: {},
    watch: {},

    computed: {},
}
</script>

<style scoped>

.ndsTitle{
    text-align: left;
    margin-left: 35px;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    width:100%;
    font-weight: 700;
    color: #272C50;
}

.ndsText2{
    font-weight: 600;
    color: #555555;
    padding-top: 5px;
}

.ndsItem {
    width: 20%;
    text-align: left;
    margin-left: 35px;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #8C8C8C;
}

.fileList {
    margin-bottom: 5px;
}

.fileList:hover {
    color: #308efa;
    text-decoration: underline;
}

.line {
    height: 1px;
    background: #eee;
    width: calc(100% - 60px);
    margin: 0 30px;
    margin-top: 10px;
}

.BasicDetail {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-top: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.flex2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

</style>